<template>
    <el-dialog v-model="loginDialogVisible" :modal="modal" z-index="2013"
        :class="{ 'login-component-dialog': true, 'login-component-dialog-modal': modal }" destroy-on-close
        @click="modalClose" :before-close="handleClose">
        <div class="login-com" v-if="loginDialogVisible" :style="setStyle" v-loading="submitLoading">
            <div v-if="tenantVisible" class="tenant-body"></div>
            <div v-else class="login-body">
                <div class="quick-change-type-box" v-if="hasLoginRight(loginTypes, ['wx', 'wxmp', 'dd', 'wxenterprise'])">
                    <svg class="icon" aria-hidden="true">
                        <use v-if="locale == 'zh-CN' || locale == 'zh-TW'"
                            v-bind:xlink:href="`#${loginType == 'namepass' || loginType == 'phone' ? 'keowledge-saomadenglu' : 'keowledge-mimadenglu1'}`">
                        </use>
                        <use v-else
                            v-bind:xlink:href="`#${loginType == 'namepass' || loginType == 'phone' ? 'keowledge-a-zu8556' : 'keowledge-mimadenglu2'}`">
                        </use>
                    </svg>
                    <canvas id="clickCanvas" class="canvas-box" width="72" height="72"></canvas>
                    <div class="mark">
                    </div>
                </div>
                <div class="pass-or-yzm-tab"
                    v-if="!hasLoginRight(loginType, ['wxmp', 'dd', 'wxenterprise', 'app', 'third'])">
                    <div class="tab-item" v-if="hasLoginRight(loginType, ['namepass', 'phone'])"
                        :class="[loginType == 'namepass' && 'tab-item-active']" @click="changeLoginType('namepass')">
                        {{ $t('message.login.passWordTitle') }}</div>
                    <div class="tab-item" v-if="hasLoginRight(loginType, ['namepass', 'phone'])"
                        :class="[loginType == 'phone' && 'tab-item-active']" @click="changeLoginType('phone')">
                        {{ $t('message.login.yzmTitle') }}</div>
                    <div class="tab-item login" v-if="!hasLoginRight(loginType, ['namepass', 'phone'])">
                        {{ $t('message.login.otherTitle') }}</div>
                </div>
                <el-form :model="loginForm" :rules="loginRules" ref="loginFormRef" class="login-form">
                    <el-form-item class="login-form-input" prop="username" v-if="loginType == 'namepass'">
                        <el-input v-model="loginForm.username" @keyup.enter="handleLogin(loginFormRef)"
                            :placeholder="$t('message.login.accountPlaceholder')" />
                    </el-form-item>
                    <el-form-item class="login-form-input" prop="account" v-if="loginType == 'ldap'">
                        <el-input v-model="loginForm.account" @keyup.enter="handleLogin(loginFormRef)"
                            :placeholder="$t('message.login.ldapPlaceholder')" />
                    </el-form-item>
                    <el-form-item class="login-form-input" prop="password"
                        v-if="hasLoginRight(loginType, ['namepass', 'ldap'])">
                        <el-input v-model="loginForm.password" @keyup.enter="handleLogin(loginFormRef)" type="password"
                            :placeholder="$t('message.login.passwordPlaceholder')" />
                    </el-form-item>

                    <el-form-item class="login-form-input" prop="phone" v-if="loginType == 'phone'">
                        <el-input v-model="loginForm.phone" @keyup.enter="handleLogin(loginFormRef)"
                            :placeholder="$t('message.login.phonePlaceholder')" />
                    </el-form-item>

                    <el-form-item class="login-form-input yzm-input-button" prop="code" v-if="loginType == 'phone'">
                        <el-input v-model="loginForm.code" @keyup.enter="handleLogin(loginFormRef)"
                            :placeholder="$t('message.login.yzmPlaceholder')" />
                        <el-button class="yzm-button" @click="getPhoneCode()">{{ yzmobj.text }}</el-button>
                    </el-form-item>

                    <!-- 微信二维码登录 -->
                    <div class="qcode-box" v-if="hasLoginRight(loginType, ['wx', 'wxmp', 'dd', 'wxenterprise'])">
                        <div class="qcode-title">{{ $t('message.login.scanLoginTitle') }}</div>
                        <div class="qcode-tips">
                            {{ $t('message.login.pleaseUse') }}{{ loginType == 'wxmp' ? $t('message.login.weChat') : loginType == 'dd' ? $t('message.login.dingTalk') : $t('message.login.weCom') }}{{ $t('message.login.scan') }}{{ loginType == 'wxmp' ? $t('message.login.followOfficalAccount') : '' }}{{ $t('message.login.login') }}
                        </div>
                        <div class="qcode-body-box">
                            <img id="weixinCode" @click="freshWeixin" :src="OfficQrcodeUrl"
                                v-if="loginType == 'wxmp' && OfficQrcodeUrl" scrolling="no" frameborder="0">
                            <div class="qcode-mark" v-if="loginType == 'wxmp' && isExpires" @click="freshWeixin">
                                <div class="tips">{{ $t('message.login.qrExpired') }}</div>
                            </div>
                            <div class="iframe-box" v-if="hasLoginRight(loginType, ['dd', 'wxenterprise'])">
                                <!-- 钉钉扫码登录 -->
                                <iframe id="ddLogin" class="dd-box" v-if="loginType == 'dd' && ddCodeUrl"
                                    :src="ddCodeUrl" scrolling="no" frameborder="0"></iframe>
                                <!-- 企业微信扫码登录 -->
                                <iframe id="wxenterpriseCode" class="wxenter-box" v-if="loginType == 'wxenterprise'"
                                    :src="`/auth/just/login/WECHAT_ENTERPRISE?client_id=${client_id}&url=` + callbackUrl"
                                    scrolling="no" frameborder="0"></iframe>
                            </div>
                        </div>
                    </div>

                    <el-form-item v-if="!hasLoginRight(loginType, ['wxmp', 'dd', 'wxenterprise', 'app', 'third'])">
                        <el-button type="primary" class="login-form-submit"
                            @click="handleLogin(loginFormRef)">{{ $t('message.login.loginBtn') }}</el-button>
                    </el-form-item>
                </el-form>
                <div class="other-login-box" v-if="otherLoginList.length != 0">
                    <div class="other-login-title">
                        {{ $t('message.login.otherLoginTitle') }}
                    </div>
                    <div class="other-login-type">
                        <svg class="icon" aria-hidden="true" v-for="(item, index) in otherLoginList" :key="index"
                            @click="changeLoginType(item.loginType)">
                            <use v-bind:xlink:href="`#${item.loginSvg}`"></use>
                        </svg>
                    </div>
                </div>
            </div>
        </div>
    </el-dialog>
</template>

<script setup lang="ts">
import {
    ref,
    reactive,
    nextTick,
    watch,
    onMounted,
    computed,
    getCurrentInstance,
    onBeforeUnmount
} from 'vue'

import { useRoute } from "vue-router"

const route = useRoute();
import { getCanLogin, getOffLoginQcode, checkQrcodeState, codeLogin, getPhone, getRegPhoneCode, getInfoByLoginType } from "@/api/login"
import useUserInfoStore from '@/store/userInfo';
import { randomLenNum, encryption } from "@/utils/util";
import { enCodeKey, client_id } from "@/const/const"
import type { FormInstance } from 'element-plus'
import { ElNotification } from 'element-plus'
import bulletin from '@/utils/bulletin'
import { useHookI18n } from '@/hooks/i18n'
const { locale, $t } = useHookI18n()
const userStore = useUserInfoStore()
const props = defineProps({
    propData: {
        type: String,
        default: ''
    },
    hasModal: {
        type: Boolean,
        default: false
    },
    queryData: Object,
    right: String,
    left: String,
    bottom: String,
    top: String,
    remove: {
        type: Function,
        default: () => { },
    },
    afterLogin: {
        type: Function,
        default: () => { },
    },
    switchTenant: {
        type: Boolean,
        default: false
    },
    switchList: {
        type: Array,
        default: []
    },
    successClose: {
        type: Boolean,
        default: true
    },
    width: {
        type: String,
        default: '390px'
    },
    height: {
        type: String,
        default: '484px'
    }
})
const callbackUrl = ref(`${location.origin + '/%23/login/callback?back=login'}`)
const ddCodeUrl = ref('')
const ddInfo = ref<any>('')
const loginDialogVisible = ref(true)
const tenantVisible = ref(false)
const isExpires = ref(false)
const submitLoading = ref(false)
const yzmobj = reactive({
    text: $t('message.login.getVeriCode'),
    time: 180,
    disabled: false
})
const loginType = ref('')
const loginTypes = ref<any>([])
const usertenantList = ref<any[]>([])
const QRLoading = ref(false)
const QRcodeUUId = ref('')
const OfficQrcodeUrl = ref('')
const QRCheckSetInterval = ref()
const loginFormRef = ref<FormInstance>()
const loginForm = reactive({
    username: "", // "admin",
    account: "",
    password: "", // "123456",
    code: "",
    randomStr: "",
    phone: '',
    wxcode: "",
    namecode: ''
})
const code = reactive({
    src: "/code",
    value: "",
    len: 6,
    namecodelen: 4,
    type: "image"
})

const loginList = [
    {
        loginSvg: 'keowledge-weixin-2',
        loginType: 'wxmp',
        hasLogin: ['wx', 'wxmp'], //wxmp代表公众号
    },
    {
        loginSvg: 'keowledge-qiyeweixin',
        loginType: 'wxenterprise',
        hasLogin: 'wxenterprise', //企业微信
    },
    {
        loginSvg: 'keowledge-LADP',
        loginType: 'ldap',
        hasLogin: 'ldap', //企业微信
    },
    {
        loginSvg: 'keowledge-dingding',
        loginType: 'dd',
        hasLogin: 'dd', //企业微信
    }
]

const loginRules = reactive({
    username: [
        { required: true, message: "", trigger: "blur" },
        {
            validator: (_rule: any, value: string | any[], callback: (arg0: Error | undefined) => void) => {
                if (value.length > 64) {
                    callback(new Error($t('message.login.userNameValidatorLen')));
                } else {
                    if (/^(?!_)(?!.*?_$)[a-zA-Z0-9_\u4e00-\u9fa5]+$/.test(value as string)) {
                        callback(undefined);
                    } else {
                        callback(new Error($t('message.login.userNameValidator')));
                    }
                }
            }, trigger: 'blur'
        }
    ],
    account: [
        { required: true, message: " ", trigger: "blur" },
    ],
    password: [
        { required: true, message: " ", trigger: "blur" },
    ],
    phone: [{ required: true, message: " ", trigger: "blur" }],
    code: [
        { required: true, message: " ", trigger: "blur" },
    ],
})

const modal = computed(() => {
    if (props.hasModal) {
        return true
    } else {
        return false
    }
})
const setStyle = computed(() => {
    let style = ''
    if (props.right) {
        style += `right:${props.right};`
    } else {
        if (props.left) {
            style += `left: ${props.left};`
        } else {
            style += `left: calc(50% - 200px);`
            // style += `right: 150px;`
        }
    }
    if (props.top) {
        style += `top:${props.top};`
    } else {
        if (props.bottom) {
            style += `bottom:${props.bottom};`
        } else {
            style += `top: calc(50% - 225px);`
        }
    }
    style += `width:${props.width};`
    style += `height:${props.height};`
    return style
})

const otherLoginList = computed(() => {
    let list: any[] = []
    loginList.forEach(item => {
        if (typeof item.hasLogin == 'object') {
            item.hasLogin.forEach(i => {
                if (loginTypes.value.indexOf(i) != -1 && loginType.value != item.loginType) {
                    list.push(item)
                }
            })
        } else {
            if (loginTypes.value.indexOf(item.hasLogin) != -1 && loginType.value != item.loginType) {
                list.push(item)
            }
        }
    })
    return list
})

const { proxy } = getCurrentInstance() as any
// 监听钉钉扫码
if (typeof window.addEventListener != 'undefined') {
    window.addEventListener('message', dingdingBackHandle, false);
} else if (typeof window.attachEvent != 'undefined') {
    window.attachEvent('onmessage', dingdingBackHandle);
}
init()
watch(() => route.path, () => {
    handleClose()
}, {
    deep: true
})

onMounted(() => {
    bulletin.remove()
})

onBeforeUnmount(() => {
    handleClose()
})


function modalClose() {
    if (modal.value) {
        handleClose()
    }
}
function init() {
    getCanLogin().then(res => {
        if (res.data && res.data.code == 0) {
            loginTypes.value = res.data.data
            if (loginTypes.value.indexOf('password') > -1) {
                loginType.value = 'namepass'
            } else {
                loginType.value = 'phone'
            }
            // 微信 展示没有
            // if(loginTypes.value.indexOf('wx') > -1) {
            //     loginType.value = 'wx'
            // }
            if (props.switchTenant) {
                tenantVisible.value = true
                usertenantList.value = props.switchList
            } else {
                userStore.LogOut()
            }
            // 微信公众号
            if (loginTypes.value.indexOf('wxmp') > -1) {
                loginType.value = 'wxmp'
                QRLoading.value = false
                if (!props.switchTenant) {
                    getOffLoginQcodeF()
                }
            }
            nextTick(() => {
                if (hasLoginRight(loginTypes.value, ['wx', 'wxmp', 'dd', 'wxenterprise'])) {
                    const canvas = document.getElementById('clickCanvas') as HTMLCanvasElement;
                    if (canvas) {
                        const context = canvas.getContext('2d');
                        if (!context) return
                        // 画一个三角形
                        context.beginPath();
                        context.moveTo(72, 72);
                        context.lineTo(-0, -0);
                        context.lineTo(72, 0);
                        context.closePath();
                        context.fillStyle = 'transparent';
                        context.fill();
                        // 添加事件监听器
                        canvas.addEventListener('click', function (event) {
                            if (event.offsetY <= event.offsetX) {
                                quickChange()
                            }
                        });
                        canvas.addEventListener('mousemove', function (event) {
                            if (event.offsetY <= event.offsetX) {
                                canvas.style.cursor = 'pointer'
                            } else {
                                canvas.style.cursor = 'default'
                            }
                        });
                        canvas.addEventListener('mouseleave', function (event) {
                            canvas.style.cursor = 'default'
                        });
                    }
                }
            })
        }
    })
}
function handleClose() {
    if (QRCheckSetInterval.value) {
        clearInterval(QRCheckSetInterval.value)
    }
    loginDialogVisible.value = false
    props.remove()
}

// 获取二维码
function getOffLoginQcodeF() {
    let uuid = getUUId(), uuidNew: Array<String> = []
    uuid.split('').forEach(item => {
        if (item != '-') {
            uuidNew.push(item)
        }
    });
    QRcodeUUId.value = uuidNew.join('')
    getOffLoginQcode(QRcodeUUId.value).then(res => {
        if (res.data.code == 0) {
            OfficQrcodeUrl.value = res.data.data
            isExpires.value = false
            if (loginType.value == 'wxmp') {
                startCheckState()
            }
        }
    })
}
// 检查登录状态
function startCheckState() {
    if (QRCheckSetInterval.value) {
        clearInterval(QRCheckSetInterval.value)
    }
    QRCheckSetInterval.value = setInterval(() => {
        checkQrcodeState(QRcodeUUId.value).then(res => {
            if (res.data.code == 0 && res.data.data.checkStatus) {
                QRLoading.value = true
                if (QRCheckSetInterval.value) {
                    clearInterval(QRCheckSetInterval.value)
                }
                QRcodeLogin(QRcodeUUId.value)
            } else if (res.data.code == 0 && res.data.data.isPastDue) {
                isExpires.value = true
                if (QRCheckSetInterval.value) {
                    clearInterval(QRCheckSetInterval.value)
                }
            }
        })
    }, 1000 * 2)
}
function QRcodeLogin(id: string) {
    let tp = {
        data: JSON.stringify(Object.assign({ id: id }))
    }
    let temp = encryption({
        data: tp,
        key: enCodeKey,
        param: ["data"]
    });
    codeLogin(('WECHAT_MP@' + temp.data)).then(res => {
        getTenantByUserList(res.data)
    })
}
// 获取该用户下所有的租户列表
function getTenantByUserList(data: { userDto: { tenants: any[]; tenantId: any; tenant: any; callBackUrl: any; }; access_token: any; refresh_token: any; }) {
    // console.log(data)
    let list = []
    if (data.userDto && data.userDto.tenants) {
        list = data.userDto.tenants
        if (list.length > 0) {
            // 只有一个租户 或指定租户 直接进去
            if (list.length == 1 || (data.userDto.tenantId && data.userDto.tenant)) {
                if (data.userDto && data.userDto.callBackUrl && localStorage.getItem('loginQuery')) {
                    proxy.$openUrl(`${data.userDto.callBackUrl}?access_token=${data.access_token}&refresh_token=${data.refresh_token}`, '_self') // 'Bearer ' +
                    localStorage.setItem('loginQuery', '')
                    submitLoading.value = false
                } else {
                    userStore.setSwitchTenant(false)
                    setUserInfoData(data)
                    if (props.successClose !== false) {
                        handleClose()
                    }
                    // 后续操作
                    if (props.afterLogin) {
                        props.afterLogin(data)
                        handleClose()
                    }
                }
            } else {
                submitLoading.value = false
                usertenantList.value = list
                userStore.setSwitchTenant(true)
                tenantVisible.value = true
            }
        }
    }
}
// 登录成功写入数据
function setUserInfoData(data: any) {
    if (data) {
        userStore.batchSetStore(data)
        userStore.setTenantId(data.userDto.tenantId)
        userStore.setTenantInfo(data.userDto.tenant)
    }
}
function getUUId() {
    return URL.createObjectURL(new Blob()).substr(-36)
}
function quickChange() {
    if (['namepass', 'phone'].indexOf(loginType.value) != -1) {
        // 微信
        if (loginTypes.value.indexOf('wx') > -1) {
            loginType.value = 'wx'
        } else if (loginTypes.value.indexOf('wxmp') > -1) {
            // 微信公众号
            loginType.value = 'wxmp'
            QRLoading.value = false
            if (!props.switchTenant) {
                getOffLoginQcodeF()
            }
        } else if (loginTypes.value.indexOf('wxenterprise') > -1) {
            // 企业微信
            changeLoginType('wxenterprise')
        }
    } else {
        changeLoginType('namepass')
    }
}
function handleLogin(formEl: FormInstance | undefined) {
    if (!formEl) return
    formEl.validate((valid, fields) => {
        if (valid) {
            let subData = {}
            if (loginType.value == 'ldap') {
                subData = { loginType: 'LDAP', account: loginForm.account, password: loginForm.password }
            } else {
                let temp = {}
                if (props.queryData) {
                    temp = JSON.parse(JSON.stringify(props.queryData))
                }
                subData = Object.assign(temp, loginForm, { loginType: loginType.value, code: loginType.value === 'namepass' ? loginForm.namecode : loginForm.code })
            }
            submitLoading.value = true
            userStore.LoginByUsername(subData).then(data => {
                getTenantByUserList(data)
            }).catch(err => {
                if (loginType.value != 'ldap') {
                    ElNotification.closeAll();
                    proxy.$notify({
                        title: $t('message.prompt'),
                        message: (err.message),
                        type: 'error',
                        position: 'bottom-right',
                        zIndex: 2015
                    });
                }
                refreshCode()
                submitLoading.value = false
            })
        }
    })
}
function getPhoneCode() {
    if (loginForm.phone && !loginForm.phone.includes(" ")) {
        let func = null
        if (loginType.value == 'register') {
            func = getRegPhoneCode
        } else {
            func = getPhone
        }
        if (func) {
            func({ phone: loginForm.phone }).then(({ data }) => {
                if (data.code === 0) {
                    //   this.$set(this[attr], 'disabled', true)
                    let time = yzmobj.time
                    let setInt = setInterval(() => {
                        time--
                        if (time <= 0) {
                            yzmobj.disabled = false
                            clearInterval(setInt)
                            yzmobj.text = $t('message.login.getVeriCode')
                        } else {
                            yzmobj.text = time + 's' + $t('message.login.resend')
                        }
                    }, 1000)
                }
            }).catch(err => {
                refreshCode();
            })
        }
    }
}
/**
 * data 判定值
 * checkData 检验的值
 * isAll 是否包含所有的条件
 */
function hasLoginRight(data: any = [], checkData: string[], isAll = false) {
    if (typeof data == 'object') {
        if (typeof checkData == 'object') {
            let sum = 0
            checkData.forEach((itemd: any) => {
                if (data.indexOf(itemd) != -1) {
                    sum++
                }
            })
            if (isAll) {
                return sum == checkData.length
            } else {
                return !!sum
            }
        } else {
            return data.indexOf(checkData) != -1
        }
    } else {
        if (typeof checkData == 'object') {
            return checkData.indexOf(data) != -1
        } else {
            return checkData == data
        }
    }
}
// 刷新验证码
function refreshCode() {
    loginForm.code = ''
    loginForm.randomStr = randomLenNum(code.len, true)
    code.value = randomLenNum(code.len)
}
// 刷新二维码
function freshWeixin() {
    // 微信公众号
    if (loginType.value == 'wxmp') {
        getOffLoginQcodeF()
    } else {
        // 微信
        // $('#weixinCode').attr('src', $('#weixinCode').attr('src'))
    }
}
// 钉钉二维码生成
function getDDCode() {
    getInfoByLoginType({ type: 'dd' }).then(res => {
        if (res && res.data && res.data.code == 0) {
            ddInfo.value = res.data.data
            let url = encodeURIComponent(res.data.data.redirectUri || `${location.origin}/#/login/dingtalk/scanback`);
            let goto = encodeURIComponent(`https://oapi.dingtalk.com/connect/oauth2/sns_authorize?appid=${res.data.data.appId}&response_type=code&scope=snsapi_login&state=STATE&redirect_uri=${url}`)
            ddCodeUrl.value = `https://login.dingtalk.com/login/qrcode.htm?goto=${goto}&style=border:none;background-color:#FFFFFF;`
        }
    })
}
// 钉钉扫码回调
function dingdingBackHandle(event: { origin: any; data: any; }) {
    var origin = event.origin;
    if (origin == "https://login.dingtalk.com") { //判断是否来自ddLogin扫码事件。
        var loginTmpCode = event.data;
        //获取到loginTmpCode后就可以在这里构造跳转链接进行跳转了
        console.log("loginTmpCode", loginTmpCode);
        let url = encodeURIComponent(ddInfo.value.redirectUri || `${location.origin}/#/login/dingtalk/scanback`);
        let goto = encodeURIComponent(`https://oapi.dingtalk.com/connect/oauth2/sns_authorize?appid=${ddInfo.value.appId}&response_type=code&scope=snsapi_login&state=STATE&redirect_uri=${url}`)
        proxy.$openUrl(`https://oapi.dingtalk.com/connect/oauth2/sns_authorize?appid=${ddInfo.value.appId}&response_type=code&scope=snsapi_login&state=STATE&redirect_uri=${goto}&loginTmpCode=${loginTmpCode}`, '_self')
    }
}
function changeLoginType(val: string) {
    if (QRCheckSetInterval.value) {
        clearInterval(QRCheckSetInterval.value)
    }
    if (val == 'wxmp') {
        getOffLoginQcodeF()
    }
    // 钉钉二维码
    if (val == 'dd') {
        getDDCode()
    } else {
        ddCodeUrl.value = ''
    }
    loginType.value = val
    resetLogin(loginFormRef.value)
}
// 重置表单
function resetLogin(formEl: FormInstance | undefined) {
    if (!formEl) return
    formEl.resetFields()
}
</script>
<style lang="scss">
.login-component-dialog {
    overflow: hidden !important;
    background: none !important;
    box-shadow: none !important;
    width: 100% !important;
    height: 100vh;
    margin: 0 !important;
    position: absolute;
    left: 0px;
    top: 0px;

    .el-dialog__header {
        display: none !important;
    }

    .el-dialog__body {
        padding: 0 !important;
        margin: 0 !important;
        width: 100% !important;
        height: 100% !important;
    }

    .login-com {
        position: absolute;
        background: #FFFFFF;
        box-shadow: 0px 4px 10px 0px rgba(54, 59, 76, 0.15);
        border-radius: 6px 6px 6px 6px;
        border: 1px solid #EEEFF0;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;

        .tenant-body {}

        .login-body {
            user-select: none;
            position: relative;
            padding: 0px 40px 34px;
            box-sizing: border-box;
            width: 100%;
            height: 100%;

            .quick-change-type-box {
                position: absolute;
                height: 72px;
                width: 72px;
                top: 0px;
                right: 0px;

                .icon {
                    width: 72px;
                    height: 72px;
                    cursor: pointer;
                }

                .canvas-box {
                    width: 72px;
                    height: 72px;
                    position: absolute;
                    top: 0px;
                    left: 0px;
                    z-index: 2;
                }

                .mark {
                    position: absolute;
                    top: 0px;
                    z-index: 1;
                    width: 72px;
                    height: 72px;
                    background: linear-gradient(225deg, transparent 50px, #fff 0);
                }
            }

            .pass-or-yzm-tab {
                display: flex;
                align-items: center;
                height: 40px;
                margin-top: 67px;

                .tab-item {
                    font-size: 16px;
                    color: #363B4C;
                    @include SourceHanSansCN-Regular;
                    cursor: pointer;
                    position: relative;
                    height: 40px;
                    line-height: 40px;
                }

                .tab-item-active {
                    @include SourceHanSansCN-Bold;

                    &::after {
                        content: "";
                        position: absolute;
                        width: 100%;
                        height: 2px;
                        background: #1E6FFF;
                        border-radius: 10px 0px 10px 0px;
                        left: 0px;
                        bottom: 0px;
                    }
                }

                .login {
                    @include SourceHanSansCN-Bold;
                    font-size: 20px;
                }

                .tab-item+.tab-item {
                    margin-left: 32px;
                }
            }

            .login-form {
                margin-top: 40px;

                .login-form-input {
                    height: 40px;
                    background: #F2F7FF;
                    border-radius: 4px 4px 4px 4px;
                    margin-bottom: 24px;
                    overflow: hidden;

                    .el-input__wrapper {
                        height: 38px !important;
                        background: transparent !important;
                        box-shadow: none !important;
                        border: none !important;

                        .el-input__inner {
                            height: 38px !important;
                            ;
                            line-height: 38px !important;
                            ;
                        }
                    }
                }

                .yzm-input-button {
                    display: flex;
                    background: transparent !important;

                    .el-input {
                        background: #F2F7FF;
                        border-radius: 4px 4px 4px 4px;
                        width: 198px;
                        overflow: hidden;
                        margin-right: 16px;
                    }

                    .yzm-button {
                        width: 96px;
                        background: #F5F6F7;
                        height: 40px;
                        border: none;
                        color: #1E6FFF;
                        @include SourceHanSansCN-Regular;

                        &:hover {
                            background-color: #EEEFF0 !important;
                        }
                    }
                }

                .login-form-submit {
                    margin-top: 16px;
                    letter-spacing: 1px;
                    width: 100%;
                    height: 40px;
                }

                .qcode-box {
                    // width: 220px;
                    display: flex;
                    flex-direction: column;
                    align-items: center;
                    margin-bottom: 32px;

                    .qcode-title {
                        font-size: 20px;
                        @include SourceHanSansCN-Regular;
                        color: #363B4C;
                        text-align: center;
                    }

                    .qcode-tips {
                        @include SourceHanSansCN-Regular;
                        font-size: 14px;
                        color: #6F7588;
                        text-align: center;
                        margin-top: 6px;
                    }

                    .qcode-body-box {
                        width: 220px;
                        height: 220px;
                        position: relative;
                        margin-top: 16px;

                        img {
                            width: 100%;
                            cursor: pointer;
                        }

                        .qcode-mark {
                            position: absolute;
                            z-index: 2;
                            top: 0px;
                            left: 0px;
                            background: transparent;
                            width: 220px;
                            height: 220px;
                            cursor: pointer;
                            display: flex;
                            align-items: center;
                            justify-content: center;
                            background-color: rgba(255, 255, 255, 0.8);

                            .tips {
                                @include SourceHanSansCN-Regular;
                                font-size: 14px;
                            }
                        }

                        .iframe-box {
                            width: 220px;
                            height: 230px;
                            display: flex;
                            justify-content: center;
                            align-items: center;
                            overflow: hidden;
                            position: relative;
                            margin-top: 10px;
                            box-sizing: border-box;

                            .dd-box {
                                position: absolute;
                                width: 210px;
                                height: 250px;
                                top: -40px;
                            }

                            .wxenter-box {
                                position: absolute;
                                width: 220px;
                                height: 260px;
                                top: -44px;
                            }
                        }
                    }
                }
            }

            .other-login-box {
                margin-top: 40px;
                display: flex;
                flex-direction: column;
                align-items: center;

                .other-login-title {
                    color: #6F7588;
                    font-size: 14px;
                    @include SourceHanSansCN-Regular;
                    position: relative;

                    &::before {
                        width: 113px;
                        height: 1px;
                        background: #EEEFF0;
                        border-radius: 0px 0px 0px 0px;
                        position: absolute;
                        content: '';
                        left: -129px;
                        top: 50%;
                    }

                    &::after {
                        width: 113px;
                        height: 1px;
                        background: #EEEFF0;
                        border-radius: 0px 0px 0px 0px;
                        position: absolute;
                        right: -129px;
                        content: '';
                        top: 50%;
                    }
                }

                .other-login-type {
                    margin-top: 20px;
                    height: 40px;
                    padding: 2px 0px;
                    box-sizing: border-box;
                    display: flex;
                    align-items: center;

                    .icon {
                        width: 36px;
                        height: 36px;
                        cursor: pointer;
                    }

                    .icon+.icon {
                        margin-left: 24px;
                    }
                }
            }
        }
    }
}
</style>